<template>
  <div class="accountInfo">
    <div class="left">
      <div class="avatar">
        <img src="@/assets/img/pcImg/头像.png" alt="" />
        <p>{{ account_name }}</p>
        <span>{{ $t("userTips") }}</span>
      </div>
      <el-menu
        :default-active="activeIndex"
        @select="handleMenuSelect"
        class="el-menu-vertical-demo"
      >
        <el-menu-item-group>
          <!-- <template slot="title">{{ $t("centralWallet") }}</template> -->
          <el-menu-item index="exchange">
            <router-link to="exchange">
              <img src="@/assets/img/pcImg/充提记录.png" alt="" width="30" />
              <span>{{ $t("RedeemChips") }}</span></router-link
            >
          </el-menu-item>
          <el-menu-item index="recharge" v-if="open_recharge">
            <router-link to="recharge">
              <img src="@/assets/img/pcImg/充值图标.png" alt="" width="30" />
              <span>{{ $t("recharge") }}</span></router-link
            >
          </el-menu-item>
          <el-menu-item index="wallet">
            <router-link to="wallet">
              <img src="@/assets/img/pcImg/钱包图标.png" alt="" width="30" />
              <span>{{ $t("wallet") }}</span></router-link
            >
          </el-menu-item>
          <el-menu-item index="record">
            <router-link to="record">
              <img src="@/assets/img/pcImg/lishijilu_1.png" alt="" width="30" />
              <span>{{ $t("record") }}</span></router-link
            >
          </el-menu-item>
          <!-- <el-menu-item index="3">
            <img src="@/assets/img/pcImg/银行卡.png" alt="" width="30" />
            <span>银行卡</span></el-menu-item
          > -->
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">{{ $t("PersonalCenter") }}</template>
          <el-menu-item index="message">
            <router-link to="message">
              <img src="@/assets/img/pcImg/消息.png" alt="" width="30" />
              <span>{{ $t("MessageCenter") }}</span></router-link
            >
          </el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </div>
    <div class="right">
      <div class="back" @click="goRecharge" v-if="isShowReturn">
        <i class="el-icon-arrow-left"></i>
        <p>{{ $t("walletRecharge") }}</p>
      </div>
      <div class="right-top" v-if="!isHide">
        <span>{{ $t("balance") }}:</span>
        <span class="money"
          >{{ formatMoney(assets_total, true) || "--" }} USDT</span
        >
        <img
          src="@/assets/img/pcImg/刷新.png"
          alt=""
          width="20"
          style="cursor: pointer"
          @click="refresh"
        />
      </div>
      <div class="right-bottom">
        <router-view
          @child-event="updateData"
          :btnActive="btnActive"
          :assetsTotal="assets_total"
        ></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import { httpInfo, httpGameBalance } from "@/http/api";
import { formatMoney } from "@/utils/common";
export default {
  name: "AccountInfo",
  data() {
    return {
      activeIndex: "recharge", // 默认选中的菜单项
      assets_total: 0,
      account_name: "",
      isShowReturn: false,
      isHide: false,
      btnActive: 1,
      open_recharge: 0,
    };
  },
  created() {
    this.getHttpInfo();
    this.getHttpGameBalance();
  },
  methods: {
    formatMoney,
    handleMenuSelect(index) {
      this.activeIndex = index;
    },
    refresh() {
      this.getHttpGameBalance();
    },

    // 获取用户信息
    async getHttpInfo() {
      let res = await httpInfo();
      if (res.code == 0) {
        // this.assets_total = res.data?.diamond || 0;
        this.uid = res.data?.uid || "";
        this.open_recharge = res.data?.open_recharge || 0;
        this.account_name = res.data?.account_name || "";
      }
    },
    // 余额
    // httpGameBalance
    async getHttpGameBalance() {
      let res = await httpGameBalance();
      if (res.code === 0) {
        this.assets_total = res.data?.diamond || 0;
      }
    },
    updateData() {
      this.getHttpGameBalance();
    },
    goRecharge() {
      this.btnActive = 2;
      this.$router.push({ name: "recharge" });
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler: function (val) {
        if (val.name == "payment" || val.name == "walletRecharge") {
          if (val.name == "walletRecharge") {
            this.isShowReturn = true;
            this.activeIndex = "recharge";
          } else {
            this.isShowReturn = false;
          }
        } else {
          if (val.name == "wallet" || val.name == "record") {
            this.isHide = true;
          } else {
            this.isHide = false;
          }
          this.activeIndex = val.name;
          this.isShowReturn = false;
        }
      },
    },
  },
};
</script>
<style lang="less" scoped>
.accountInfo {
  min-height: 680px;
  display: flex;
  justify-content: center;
  align-items: start;
  .left {
    width: 220px;
    min-height: 680px;
    background: #fff;
    border-radius: 10px;
    .avatar {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 50px;
      margin-bottom: 40px;
      img {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
      }
      p {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 10px;
      }
      span {
        font-size: 14px;
        color: #999;
        display: inline-block;
        text-align: center;
        width: 140px;
      }
    }
    .el-menu {
      height: 100%;
      border-radius: 10px;
      border: none;
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    margin-left: 20px;
    min-height: 680px;
    .back {
      display: flex;
      justify-content: start;
      align-items: center;
      margin-bottom: 20px;
      cursor: pointer;
    }
    .right-top {
      width: 100%;
      height: 80px;
      background: #fff;
      border-radius: 10px;
      display: flex;
      justify-content: start;
      align-items: center;
      padding: 0 20px;
      margin-bottom: 10px;
      .money {
        color: #efcd2d;
        margin: 0 10px;
      }
      .el-icon-refresh {
        cursor: pointer;
      }
    }
    .right-bottom {
      width: 100%;
      flex: 1;
      // display: flex;
      // flex-direction: column;
      // justify-content: start;
      // align-items: center;
    }
  }
}
</style>
